<template>
  <div class="with-draw pad">
    <div class="head">
      <span>提现管理</span>
    </div>
    <el-input
      v-model="searchText"
      @keypress.enter.native="confirmSearch"
      @input="clearSearch"
      placeholder="输入医生名称搜索"
    >
      <el-button slot="append" icon="el-icon-search" @click="confirmSearch"></el-button>
    </el-input>
    <el-table :data="withDrawRecords" border stripe v-loading="loading" class="m-t-b">
      <el-table-column label="医生名称" prop="clinicianName"></el-table-column>
      <el-table-column label="提现金额">
        <template slot-scope="scope">
          {{scope.row.money}}元
        </template>
      </el-table-column>
      <el-table-column label="提现方式" prop="withdrawalTypeText"></el-table-column>
      <el-table-column label="提现状态" prop="statusText">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.withdrawalState === 0">待审核</el-tag>
          <el-tag type="success" v-else-if="scope.row.withdrawalState === 1">提现成功</el-tag>
          <el-tag type="danger" v-else-if="scope.row.withdrawalState === 2">提现失败</el-tag>
          <el-tag type="default" v-else>未知状态</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.withdrawalState === 0" type="primary" @click="changeMoneyStatus(scope.row, 1)">通过审核</el-button>
          <el-button v-if="scope.row.withdrawalState === 0" type="danger" @click="changeMoneyStatus(scope.row, 2)">驳回审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="m-t-b flex"
      :page-size="pageSize"
      layout="prev, pager, next"
      @current-change="handlePagi"
      :total="totalRecord">
    </el-pagination>
    <el-dialog :visible.sync="showNameDialog" title="填写审核人">
      <el-form :model="reason" label-position="top" :rules="rules" ref="money">
        <el-form-item label="审核人名称" prop="doManName">
          <el-input v-model="reason.doManName"/>
        </el-form-item>
        <el-form-item label="驳回理由" prop="reason" v-if="status === 2">
          <el-input v-model="reason.reason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideNameDialog">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getWithDrawRecord, changeWithDrawStatus } from '../api/knowledge';
import { formatDate } from '../util/index';
export default {
  name: 'WithDraw',
  data () {
    return {
      withDrawRecords: [],
      loading: false,
      showNameDialog: false,
      totalRecord: 0,
      pageSize: 10,
      doManName: '',
      reason: {
        doManName: '',
        reason: ''
      },
      status: 1,
      searchText: '',
      types: ['线下提现', '银行卡提现', '微信零钱提现'],
      selectRow: {},
      rules: {
        doManName: [
          { required: true, message: '请填写审核人名称', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '驳回理由', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    fetchWithDrawRecords (index) { // 查询提现记录
      this.loading = true;
      getWithDrawRecord({
        index,
        count: this.pageSize,
        queryParam: {
          clinicianName: this.searchText || null
        }
      })
      .then(res => {
        if (res.data.code === 1) {
          this.totalRecord = res.data.data.totalRecord;
          let list = res.data.data.list || [];
          list.forEach(item => {
            item.createDate = formatDate(item.createDate, 'ZH');
            item.statusText = item.withdrawalState === 0 ? '待审核' : (item.withdrawalState === 1 ? '提现成功' : '提现失败');
            item.withdrawalTypeText = this.types[item.withdrawalType]
          });
          this.withDrawRecords = list;
          this.loading = false;
          console.log(list, this.totalRecord)
        } else {
          this.loading = false;
          this.$message.error(res.data.msg || '服务异常!')
        }
      })
      .catch(e => {
        this.$message.error('服务异常!');
        this.loading = false
      })
    },
    changeMoneyStatus (row, status) { // 更改提现状态
      this.status = status;
      this.$confirm(`确定${status === 1 ? '通过' : '驳回'} ${row.clinicianName}的提现请求?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(r => {
        // if (status === 1) { // 通过审核
        //   this.showNameDialog = true;
        //   this.selectRow = row
        // } else { // 驳回审核
        //   console.log(row)
        // }
        this.showNameDialog = true;
        this.selectRow = row
      })
      .catch(err => [
        this.$message.info('取消操作')
      ])
    },
    hideNameDialog () { // 隐藏名称弹出框
      this.showNameDialog = false
    },
    confirmChange () { // 确认审核通过
      this.$refs.money.validate(valid => {
        if (valid) {
          changeWithDrawStatus({
            withdrawDepositId: this.selectRow.withdrawDepositId,
            withdrawalState: this.status,
            auditor: this.reason.doManName,
            failReaseon: this.reason.reason || null,
            accountingDate: null
          })
          .then(res => {
            if (res.data.code === 1) {
              this.$message.success('操作成功!');
              this.showNameDialog = false;
              this.doManName = '';
              this.fetchWithDrawRecords(1)
            } else {
              this.$message.error(res.data.msg || '服务异常!')
            }
          })
          .catch(e => {
            this.$message.error('服务异常!')
          })
        } else {
          return false
        }
      })
    },
    confirmSearch () { // 确认搜索
      if (!this.searchText.trim()) {
        return this.$message.error('请输入有效搜索内容!')
      };
      this.fetchWithDrawRecords(1)
    },
    clearSearch (e) { // 清除搜索
      if (!e.trim()) {
        this.fetchWithDrawRecords(1)
      }
    },
    handlePagi (page) { // 分页事件
      this.fetchWithDrawRecords(page)
    }
  },
  created () {
    this.fetchWithDrawRecords(1)
  }
}
</script>
<style lang="scss">
  .with-draw {

  }
</style>
